import React, { useState } from "react";
import { SearchIcon } from "@/components/icons";
import DefaultLayout from "@/layouts/default";
import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from "@heroui/table";
import { Kbd } from "@heroui/kbd";
import { Input } from "@heroui/input";

const data = [
  {
    eventId: 1,
    eventName: "USD",
    eventDate: "03-Nov-2025",
    eventType: "block",
    tag: "Payment"
  },
  {
    eventId: 2,
    eventName: "FX:USDCNH",
    eventDate: "03-Nov-2025",
    eventType: "block",
    tag: "Fixing"
  },
  {
    eventId: 3,
    eventName: "USD",
    eventDate: "03-Nov-2025",
    eventType: "block",
    tag: "Payment"
  }
];


export default function EventsPage() {
  const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
  const handleRowClick = (id: number) => {
    setSelectedRowId(id === selectedRowId ? null : id); // 点击同一行取消选择
  };
  return (
    <DefaultLayout>
      <Input
        aria-label="Search"
        classNames={{
          inputWrapper: "bg-default-100",
          input: "text-sm",
        }}
        endContent={
          <Kbd className="hidden lg:inline-block" keys={["command"]}>
            K
          </Kbd>
        }
        labelPlacement="outside"
        placeholder="Search..."
        startContent={
          <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
        }
        type="search"
      />
      <div className="py-2"></div>

      <Table aria-label="Scrollable Table"
        isHeaderSticky
        color={"default"}
        defaultSelectedKeys={[selectedRowId || ""]}
        selectionMode="single"
        classNames={{
          base: "flex-grow overflow-y-auto",
          wrapper: "relative",  // 确保正确的定位上下文
          table: "border-collapse",  // 确保边框正确渲染
        }}
      >
        <TableHeader>
          <TableColumn>Event Name</TableColumn>
          <TableColumn>Event Date</TableColumn>
          <TableColumn>Event Type</TableColumn>
          <TableColumn>Tag</TableColumn>
          <TableColumn>Event Id</TableColumn>
        </TableHeader>
        <TableBody>
          {data.map((item) => (
            <TableRow key={item.eventId}
              onClick={() => handleRowClick(item.eventId)}
            >
              {/* 可展开的行内容 */}
              <TableCell>
                {item.eventName}
              </TableCell>
              <TableCell>
                {item.eventDate}
              </TableCell>
              <TableCell>{item.eventType}</TableCell>
              <TableCell>
                {item.tag}
              </TableCell>
              <TableCell>
                {item.eventId}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </DefaultLayout>
  );
}
